<template>
  <el-col :span="20" style="height: 93vh;padding: 1vh;background-color: rgba(54,71,90,0.88)">
    <el-col :offset="1" :span="2">
      <el-select v-model="value" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="3" style="margin-left: 1vw">
      <el-radio-group v-model="checkboxGroup1">
        <el-radio-button v-for="city in cities" :label="city" :key="city">{{ city }}</el-radio-button>
      </el-radio-group>
    </el-col>
    <el-col :span="6" style="display: flex">
      <el-input placeholder="请输入内容" v-model="inp">
        <el-button slot="append" icon="el-icon-search" circle @click="getData"></el-button>
      </el-input>
    </el-col>

    <el-col :offset="1" :span="22" style="margin-top: 2vh">
      <el-table
          v-show="checkboxGroup1==='微博'"
          :data="tableData"
          style="width: 100%">
        <el-table-column
            :show-overflow-tooltip="true"
            prop="text"
            label="text">
        </el-table-column>
        <el-table-column
            width="200"
            :show-overflow-tooltip="true"
            prop="topic"
            label="topic">
        </el-table-column>
        <el-table-column
            width="130"
            v-for="(item, key) in tableHead"
            :key="key"
            :prop=item
            :label=item>
        </el-table-column>
        <el-table-column
            width="180"
            prop="tool"
            label="tool">
        </el-table-column>
      </el-table>
      <el-table
          v-show="checkboxGroup1==='评论'"
          :data="tableData"
          style="width: 100%">
        <el-table-column
            :show-overflow-tooltip="true"
            prop="content"
            label="content">
        </el-table-column>
        <el-table-column
            width="150"
            v-for="(item, key) in tableHead"
            :key="key"
            :prop=item
            :label=item>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24" style="height: 3vh; padding: 2vh; text-align: center">
      <el-pagination
          class="page_ware"
          background
          layout="prev, pager, next"
          :page-size="pagination.size"
          @current-change="handleChange"
          :total="total">
      </el-pagination>
    </el-col>

  </el-col>
</template>

<script>
const cityOptions = ['微博', '评论'];
export default {
  name: "searchVue",
  inject: ["openLoad", "closeLoad"],
  data() {
    return {
      checkboxGroup1: '微博',
      tableHead: [],
      cities: cityOptions,
      inp: '',
      options: [{
        value: '疫苗',
        label: '新冠疫苗'
      }, {
        value: '毒株',
        label: '毒株'
      }, {
        value: '疫情放开',
        label: '疫情放开'
      }, {
        value: '抗疫',
        label: '抗疫'
      }, {
        value: '新冠',
        label: '新冠'
      }, {
        value: 'COVID-19',
        label: 'COVID-19'
      }],
      value: '疫情放开',
      tableData: [],
      pagination: {
        size: 14,   //单页显示条数
        page: 1,   //当前页码
      },
      total: 0,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getHead() {
      this.$axios.post(`${this.$settings.HOST}/visualization/columns/`, {
        flag: this.checkboxGroup1
      }).then(response => {
        this.tableHead = response.data.columns
      }).catch(error => {
        console.log(error.response.data)
      })
    },
    getData() {
      this.getHead()
      this.openLoad()
      let filters = {}
      filters.text = this.inp
      filters.page = this.pagination.page;
      filters.size = this.pagination.size;
      if (this.checkboxGroup1 === '微博') {
        filters.flag = this.value
        this.$axios.get(`${this.$settings.HOST}/visualization/weibo/`, {
          params: filters
        }).then(response => {
          this.tableData = response.data.results
          this.closeLoad()
          this.total = response.data.count
        }).catch(error => {
          console.log(error.response.data)
          this.closeLoad()
        })
      } else if (this.checkboxGroup1 === '评论') {
        this.$axios.get(`${this.$settings.HOST}/visualization/comment/`, {
          params: filters
        }).then(response => {
          this.tableData = response.data.results
          this.closeLoad()
          this.total = response.data.count
        }).catch(error => {
          console.log(error.response.data)
          this.closeLoad()
        })
      }
    },

    handleChange(page) {
      console.log("本次点击的页码:", page);
      this.pagination.page = page;
      this.getData();
    }
  }
}
</script>

<style scoped>
.el-select .el-input {
  width: 130px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}


>>> .el-table tr {
  background-color: #30517270;
}

>>> .el-table th.el-table__cell {
  background-color: #30517270;
}

>>> .el-table thead {
  color: white;
}

.el-table {
  color: black;
  font-family: aktiv-grotesk, "Segoe UI", Arial, Helvetica, sans-serif;
}

</style>